<template>
  <div class="index">
    <el-carousel class="index_banner" :interval=10000 :height="viewportHei + 'px'">
      <el-carousel-item class="cu-carousel-item" :loop="true" v-for="(item, i) in carouselList" :key="i">
        <img :src="item.url" :title="item.title" :alt="item.title" class="inner_banner_pc"
          :style="height = viewportHei + 'px'">

        <img :src="item.url" style="width:100%;opacity: 0;" alt="">
      </el-carousel-item>
    </el-carousel>
    <div class="main1">
      <div class="center">
        <div class="top flex flex_row_justify animate_fadeUp100 fadeInUp100">
          <div class="left" v-if="newslist" @click="newsgoto(newslist)">
            <div class="img">
              <div class="picture_container">
                <img :src="newslist.bgPic" :alt="newslist.title" :title="newslist.title">
              </div>
            </div>
            <div class="txt">
              <a class="title" target="_blank" rel="noopener noreferrer">{{ newslist.title }}</a>
              <p class="time">发布日期：{{ newslist.publishDate }}</p>
              <p class="abstract"></p>
            </div>
          </div>
          <div class="right">
            <div class="black">
              <div class="title">
                <div class=" flex flex_row_justify">
                  <div class="txt flex flex_column_center hoverTips" @click="newstitlego('more', 'ZJ_BSDT')">
                    <div class="cn">新闻动态</div>
                    <span>/</span>
                    <div class="en">NEWS</div>
                  </div>
                  <a class="more hoverTips" @click="newstitlego('more', 'ZJ_BSDT')">MORE
                    <i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i>
                  </a>
                </div>
              </div>
              <div class="content">
                <ul>
                  <a :href="item.href" :title="item.title" @click="newsgoto(item)"
                    v-for="(item, index) in newsDynamicList" :key="index">
                    <li class="article flex flex_column_center flex_row_justify"><i class="iconfont iconyuandian"></i>
                      <div class="name flex ">
                        <p class="txt">{{ item.title }}</p>
                      </div>
                      <span class="time">{{ item.publishDate}}</span>
                    </li>
                  </a>
                </ul>
              </div>
            </div>
            <div class="black two">
              <div class="title">
                <div class="   flex  flex_column_center flex_row_justify">
                  <div class="txt flex flex_column_center hoverTips">
                    <div class="cn" @click="notifynews('ZJ_TZGG')">通知公告</div>
                    <span>/</span>
                    <div class="cn" @click="notifynews('ZJ_ZBGG')">采购公告</div>
                  </div>
                  <a @click="newsnotifygo('more', 'ZJ_TZGG')" class="more">MORE <i
                      class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
                </div>
              </div>
              <div class="content">
                <ul>
                  <a :href="item.href" :title="item.title" v-for="(item, index) in noticeList" @click="newsgoto(item)"
                    :key="item.index">
                    <li class="article flex flex_column_center flex_row_justify"><i class="iconfont iconyuandian"></i>
                      <div class="name flex ">
                        <p class="txt">{{ item.title }}</p>
                      </div>
                      <span class="time">{{ item.publishDate }}</span>
                    </li>
                  </a>
                </ul>
              </div>

            </div>
          </div>
        </div>
        <div class="query flex flex_row_justify animate_fadeUp100 fadeInUp100">
          <div class="black1 background_img" style="background-image: require(../../images/home/1589279863.jpg);">
            <div class="txt">
              <p class="title">计量服务平台</p>
              <a href="https://www.zsjlcs.com/cmiims/a/login" target="_blank" title=""
                rel="noopener noreferrer">点击查询<span>&gt;</span></a>
            </div>
          </div>
          <div class="black2 background_img" style="background-image: require(../../images/home/1589279863.jpg);">
            <div class="txt">
              <p class="title">质检服务平台</p>
              <a href="https://mall.zszjs.com/#/home" target="_blank" rel="noopener noreferrer"
                title="">点击进入<span>&gt;</span></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务项目 -->
    <section class="main2 bgcolor">
      <div class="center animate_fadeUp100 fadeInUp100">
        <div class="secondary_title">
          <div class="flex flex_row_justify flex_column_center">
            <div class="txt flex flex_column_center">
              <div class="cn hoverTips">服务项目</div>
              <span>/</span>
              <div class="en">SERVICE PROJECT</div>
            </div>
            <a @click="$router.push({ path: '/service' })" class="more">MORE<i
                class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
          </div>
        </div>
        <div class="content flex flex_row_justify flex_wrap">
          <a :href="se_item.href" class="black picture_scale" :title="se_item.title"
            v-for="(se_item, index) in serviceItem" :key="index">
            <div class="img" @click="$router.push({ path: '/service', query: { title: se_item.title, index: index } })">
              <div class="picture_container">
                <img :src="se_item.pic" :alt="se_item.title" :title="se_item.title">
              </div>
              <div class="title">{{ se_item.title }}</div>
            </div>
          </a>
        </div>
      </div>
    </section>
    <section class="main3">
      <div class="center">
        <div class="top flex flex_row_justify">
          <div class="left animate_fadeUp100 fadeInUp100">
            <div class="title">
              <div class=" flex flex_row_justify flex_column_center">
                <div class="txt flex flex_column_center">
                  <div class="cn active hoverTips" ref="BSJJ" @mouseenter="main3mouseenter('ZJ_BSJJ')" @click="$router.push({
                    path: '/about', query: {
                      title: '本所简介',
                      index: 0
                    }
                  })">本所简介</div>

                  <div class="cn  hoverTips" ref="ZZZS" @mouseenter="main3mouseenter('ZJ_ZZZS')" @click="$router.push({
                    path: '/about', query: {
                      title: '荣誉资质',
                      children: '企业资质',
                      index: 2
                    }
                  })">资质证书</div>
                </div>

              </div>
            </div>
            <div class="content">
              <div class="black  " ref="ZJ_BSJJ" :class="tabTEXT == 'ZJ_ZZZS' ? 'hideBox' : ''">
                <div class="about">
                  <div class="picture_container">
                    <img src="../../images/home/index_about_bg.jpg" alt="" class="index_about_bg_pc">
                  </div>
                  <div class="txt">
                    <p class="name">{{ aboutObj.title }}</p>
                    <p class="abstract ellipsis-multiline" v-html="aboutObj.intro">
                    </p>
                    <a @click="$router.push({ path: '/about' })" class="btn">查看更多<i
                        class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
                  </div>
                </div>
              </div>

              <div class="black  ZJ_ZZZS" ref="ZJ_ZZZS" :class="tabTEXT == 'ZJ_BSJJ' ? 'opacityBox' : ''">
                <div class="honor flex flex_row_justify flex_wrap">
                  <div class="carousel">
                    <swiperCustome :swiperData=QYZZData v-if="showSwiperCustome">
                    </swiperCustome>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left left_m animate_fadeUp100 fadeInUp100">
            <div class="title">
              <div class=" flex flex_row_justify flex_column_center">
                <div class="txt flex flex_column_center">
                  <div class="cn">资质证书</div>
                </div>
                <a class="more">MORE<i class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
              </div>
            </div>
            <div class="content">
              <div class="black hide">
                <div class="honor flex flex_row_justify flex_wrap">
                  <div class="swiper-container swiper-container-horizontal">
                    <div class="swiper-wrapper" style="transition-duration: 300ms;">

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="right animate_fadeUp100 fadeInUp100">
            <div class="title">
              <div class=" flex flex_row_justify flex_column_center">
                <div class="txt flex flex_column_center" @click="$router.push({ path: '/nation', query: {} })">
                  <div class="cn hoverTips">国家中心及省站</div>
                </div>
                <a class="more" @click="$router.push({ path: '/nation', query: {} })">MORE<i
                    class="iconfont icon-jiantou_liebiaoxiangyou_o"></i></a>
              </div>
            </div>
            <div class="content">
              <ul v-for="(nationli, index) in nationcenterlist" :key="index">
                <a @click="$router.push({ path: '/nation', query: { title: nationli.title, index: index } })"
                  :title="nationli.title" class="line">
                  <li>{{ nationli.title }}</li>
                </a>
              </ul>
              <div class="advertising">
                <div class="picture_container">
                  <img src="@/images/home/centerNation.png" alt="/服务质量监督ad2" title="/服务质量监督ad2">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bottom clear_float animate_fadeUp100 fadeInUp100">
          <div class="bottom_select">
            <!-- @visible-change="handleDropdownVisible" -->
            <el-select ref="selectRef1" v-model="options1.value" placeholder="请选择">
              <el-option @click.native="handleOptionClick(item.value)" v-for="item in options1.options" :key="item.key"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="bottom_select">

            <el-select v-model="options2.value" placeholder="请选择 ">
              <el-option @click.native="handleOptionClick(item.value)" v-for="item in options2.options" :key="item.key"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="bottom_select">
            <el-select v-model="options3.value" placeholder="请选择">
              <el-option @click.native="handleOptionClick(item.value)" v-for="item in options3.options" :key="item.key"
                :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { extractDateFromString } from "@/utils/methods.js"
import { config } from "@/common/config.js"
import swiperCustome from "./custome-swiper.vue"
import { encodeURL, decodeURL } from '../../../src/utils/index.js'
export default {
  components: { swiperCustome },
  name: 'homepage',
  data() {
    return {
      showType: 'TZGG',
      carouselList: [{
        url: require('../../images/commoncard/swiperCard/home.jpg')
      }, {
        url: require('../../images/commoncard/swiperCard/home2.jpg')
      }],

      newsDynamicList: [],
      noticeList: [],
      serviceItem: [

      ],
      nationcenterlist: [],
      linkoptions: {
        link1: {
          value: '',
          option: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }]
        },
        link2: {
          option: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }]
        }, link3: {
          option: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }]
        }
      },
      aboutUsTree: [{
        title: '本所简介',
        industryCat: 'ZJ_BSJJ'
      },],
      aboutObj: {},
      QYZZData: [],
      options1: {
        options: [{
          key: "1",
          value: atob(process.env.VUE_APP_ZHONG_SHAN_QUALITY),
          href: atob(process.env.VUE_APP_ZHONG_SHAN_QUALITY),
          label: '国家市场监督管理总局'
        },

        ],
        value: '国家市场监督管理总局'
      },
      options2: {
        options: [{
          key: "1",
          value: atob(process.env.VUE_APP_ZHONG_SHAN_JIL),
          href: atob(process.env.VUE_APP_ZHONG_SHAN_JIL),
          label: '广东省强制检定工作计量器具管理平台'
        },
        ],
        value: '广东省强制检定工作计量器具管理平台'
      },
      options3: {
        options: [{
          key: "1",
          value: atob(process.env.VUE_APP_ZHONG_SHAN),
          href: atob(process.env.VUE_APP_ZHONG_SHAN),
          label: '国家灯具质量检验检测中心（中山）'
        },

        ],
        value: '国家灯具质量检验检测中心（中山）'
      },
      currenttitlename: 'ZJ_TZGG',
      showSwiperCustome: false,
      tabTEXT: 'ZJ_BSJJ',
      viewportWidth: window.innerWidth,
      viewportHei: '',


    }
  },
  computed: {
    newslist() {
      return this.newsDynamicList.slice(0, 1)[0]
    },
  },
  mounted() {
    this.getQYZZ()

    this.updateViewportWidth()
    window.addEventListener('resize', this.updateViewportWidth)
 
  },


  created() {
    this.init()
  },
  methods: {
    updateViewportWidth() {

      this.viewportWidth = document.getElementById('app').offsetWidth;
      this.viewportHei = this.viewportWidth * 450 / 1903
      this.viewportHei = Math.floor(this.viewportHei)

    },
    gotoNewspage(data) {
      this.$router.push({
        path: '/news',
        query: {
          // searchInput:data.title
        }
      })
    },
    previewPic(code) {

      return config.url + config.prefix + '/file/previewFile?code=' + code
    },
   
    changeSelect(data) {
      console.log('点击了 Option', data);
      return
      this.toDetail(data)
    },
    toDetail(url) {
      window.open(url, '_blank');

    },
    init() {

      // 获取服务项目
      this.getserviceItem()
      // 获取新闻动态
      this.newsInfo()
      this.notifynews()
      // 获取国家中心及省站
      this.getnationals()
      // 获取企业资质

      //本所简介

      this.getproduct()

    },
    getserviceItem() {
      let params = {
        tenantId: 1,
        id: 3
      }
      // 获取产品树
      this.$http.get(this.$api.serveItemApi.listPlateCatAndChildren, params).then(res => {

        if (res.code == 200) {
          let result = []
          const objArray = res.data
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              result.push({
                id: item.id,
                title: item.title,
                pic: this.previewPic(item.bgPic),
              })
            }
          }
          this.serviceItem = result.slice(0, 10)
        }
      })
    },
    notifynews(data) {
      this.currenttitlename = data
      let params = {
        pageNum: 1,
        pageSize: 10,
        data: {
          tenantId: 1,
          industryCat: data ? data : 'ZJ_TZGG'
        },
        current: this.currentPage,
      }
      this.$http.post(this.$api.newApis.listEnterpriseNews, params).then(res => {
        if (res.code == 200) {
          let result = []
          const objArray = res.data.list
          this.total = res.data.total
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              detail.createTime = extractDateFromString(item.createTime)
              detail.publishDate = item.publishDate?.slice(0, 10) || ''
              detail.industryCat = item.industryCat
              detail.content = item.content

              result.push(detail)
            }
          }
          const newarray = []
          result.forEach((item, index) => {
            if (index <= 4) {
              newarray.push(item)
            }
          })
          this.noticeList = newarray
        }

      })
    },
    newsInfo() {
      let params = {
        pageNum: 1,
        pageSize: 10,
        data: {
          tenantId: 1,
          industryCat: 'ZJ_BSDT'
        },
        current: this.currentPage,
      }
      let _that = this
      this.$http.post(this.$api.newApis.listEnterpriseNews, params).then(res => {
        if (res.code == 200) {
          let result = []
          const objArray = res.data.list
          this.total = res.data.total
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              detail.createTime = extractDateFromString(item.createTime)
              detail.publishDate = item.publishDate?.slice(0,10)||''
              detail.industryCat = item.industryCat
              detail.content = item.content
              detail.attachmentList = item.attachmentList
              result.push(detail)
            }
          }
          const newarray = []
          result.forEach((item, index) => {
            if (index <= 4) {
              newarray.push(item)
            }
          })
          this.newsDynamicList = newarray

        }
      })
    },
    getnationals() {
      let params = {
        tenantId: 1,
        id: 7
      }
      // 获取产品树
      this.$http.get(this.$api.nationsApi.listPlateCatAndChildren, params).then(res => {
        if (res.code == 200) {
          let result = []
          const objArray = res.data
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              result.push(detail)
            }
          }
          this.nationcenterlist = result.slice(0, 10)

        }
      })
    },
    getproduct() {

      let params = {
        pageNum: 1,
        pageSize: 10,
        data: {
          tenantId: 1,
          industryCat: this.aboutUsTree[0].industryCat
        },
        current: this.currentPage,
      }
      let _that = this
      this.$http.post(this.$api.aboutApi.listEnterpriseNews, params).then(res => {
        if (res.code == 200) {
          let result = []
          const objArray = res.data.list
          this.total = res.data.total
          if (objArray.length > 0) {
            for (let item of objArray) {
              let detail = {}
              detail.id = item.id
              detail.title = item.title
              detail.bgPic = this.previewPic(item.bgPic)
              detail.intro = item.intro
              result.push(detail)
            }
          }

          this.aboutObj = result[0]
        }
      })
    },
    getPageInfo() {

    },
    main3mouseenter(data) {
      this.tabTEXT = data
    },
    main3mousleave(data) {
    },

    getQYZZ() {
      let params = {
        pageNum: 1,
        pageSize: 10,
        data: {
          tenantId: 1,
          plateId: 6,
          type: 'ZJ_QYZZ'
        },
        current: this.currentPage,
      }
      this.$http.post(this.$api.aboutApi.listPictur, params).then(res => {

        if (res.code == 200) {
          const objArray = res.data.list
          let result = []
          if (objArray.length > 0) {
            for (let [index, item] of objArray.entries()) {
              let detail = {}
              detail.pic = this.previewPic(item.picture)
              detail.title = item.title

              result.push(detail)
            }
          }

          this.QYZZData = result
          this.showSwiperCustome = true


        }
      })
    },
    newsgoto(data) {
      let params = {
        status: "detail",
        data: data
      }
      this.$router.push({ path: '/news', query: { data: JSON.stringify(params) } })
    },
    newstitlego(info, title) {
      this.currenttitlename = title
      let data = {
        status: "more",
        tab: this.currenttitlename
      }
      this.$router.push({ path: '/news', query: { data: JSON.stringify(data) } })


    },
    newsnotifygo(value, title) {
      if (this.currenttitlename != 'ZJ_ZBGG') {
        if (title !== '') {
          this.currenttitlename = title
        }
      }
      let data = {
        status: "more",
        tab: this.currenttitlename
      }
      this.$router.push({ path: '/news', query: JSON.stringify(data) })


    },
    newsgototitle() {
      let data = {
        showType: "list",

      }
      this.$router.push({ path: '/news', query: { data: JSON.stringify(data) } })

    },
 
    // 下拉点击事件
    handleOptionClick(data) {
      console.log('点击了 Option', data);
      this.toDetail(data)
    }
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/media.scss";

@import "@/styles/animate_fade.scss";
@import "@/styles/swiper.scss";

.el-carousel__item h3 {
  color: #a02017;
  // font-size: 14px;
  // opacity: 0.75;
  // line-height: 150px;
  // margin: 0;
}

.el-carousel__item:nth-child(2n) {
  // background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  // background-color: #d3dce6;
}

//reset.scss
/* 图片居中 */
.picture_container {
  position: relative;
  overflow: hidden;
  background: none;
}

.picture_container img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

.flex {
  text-align: unset;
}

.flex_column_center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  /* align-items: center; */
}

.flex_column_start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -o-align-items: flex-start;
  align-items: flex-start;
}

//animation
.fadeInUp100 {
  -webkit-animation-name: fadeInUp100;
  animation-name: fadeInUp100;
}

.flex_row_justify {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
}

// 绘制三角形
.index .main3 .bottom .bottom_select::after {
  content: " ";
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: transparent;
  position: absolute;
  right: 10px;
  top: 17.5px;
}

//element-select
.el-select-dropdown__item {
  padding: 0 20px;
}

.ellipsis-multiline {
  height: 130px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  text-overflow: clip;

}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}



.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;


}

.carousel {
  height: 100%;
  width: 100%;
  position: relative;

  .text {
    position: absolute !important;
    bottom: 0;
    background: #bcdbfb;
    width: 100%;
    height: 32px;
    line-height: 32px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.hideBox {
  display: none;
}

.opacityBox {
  height: 0;
  opacity: 0;
}

::v-deep .index_banner .el-carousel__container {
  height: unset;
}
</style>
